<template>
  <div class="swiper" @click="trans">
    <div class="swiper-container">
      <div class="swiper-item">1</div>
      <div class="swiper-item">2</div>
      <div class="swiper-item">3</div>
      <div class="swiper-item">4</div>
      <div class="swiper-item">5</div>
      <div class="swiper-item">6</div>
      <div class="swiper-item">7</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      moveInstance: 58
    }
  },
  methods: {
    trans() {
      const swiper = document.querySelector('.swiper')
      const swiperItem = document.querySelectorAll('.swiper-item')
      const wrapHeight = swiper.clientHeight
      const itemHeight = swiperItem[0].clientHeight
      const num = Math.ceil(wrapHeight / itemHeight)

      // swiperItem.forEach((item) => {
      //   item.style.transform = `translateY(-${this.moveInstance}px)`
      // })
      const firstItem = Array.from(swiperItem).splice(0, 1)[0]
      console.log(firstItem);
      firstItem.style.position = 'absolute';
      firstItem.style.bottom = -8 + 'px'
      // firstItem.style.transform = 'none'

      this.moveInstance *= 2



      console.log(wrapHeight);
      console.log(num);
    }
  }
}
</script>

<style lang="css" scoped>
.swiper {
  width: 300px;
  height: 300px;
}
.swiper-container{
  position: relative;
}
.swiper-item {
  height: 50px;
  background-color: #aaa;
  margin-bottom: 8px;
  width: 100%;
  transition: all 0.5s;
}
</style>